<template>
    <div class="page">
        <div class="data-box">
            <div class="text">预期年化收益率(%)</div>
            <div class="number">7.0~7.5</div>
            <div class="detail-box">
                <div class="item">
                    <div class="key">金额</div>
                    <div class="value">13000万</div>
                </div>
                <div class="item">
                    <div class="key">期限</div>
                    <div class="value">2+2+1年</div>
                </div>
                <div class="item">
                    <div class="key">债项评级</div>
                    <div class="value">AA</div>
                </div>
            </div>
        </div>
        <div class="main-data">
            <div class="data-item-box">
                <div class="left-text">主体评级</div>
                <div class="right-text">AA+</div>
            </div>
            <div class="data-item-box">
                <div class="left-text">是否国企</div>
                <div class="right-text">否</div>
            </div>
            <div class="data-item-box">
                <div class="left-text">产品类型</div>
                <div class="right-text">债权类—公司债</div>
            </div>
        </div>
        <div class="main-data">
            <div class="data-item-box">
                <div class="left-text">融资主体</div>
                <div class="right-text">上市公司控股集团</div>
            </div>
            <div class="data-item-box">
                <div class="left-text">融资用途</div>
                <div class="right-text">补充公司营运资金</div>
            </div>
            <div class="data-item-box">
                <div class="left-text">还款说明</div>
                <div class="right-text">-</div>
            </div>
            <div class="data-item-box">
                <div class="left-text">有无担保</div>
                <div class="right-text">无</div>
            </div>
            <div class="data-item-box">
                <div class="left-text">担保方式</div>
                <div class="right-text">公司实际控制人（个人）提供全额无条件 不可撤销连带责任保证担保</div>
            </div>
            <div class="data-item-box">
                <div class="left-text">期限说明</div>
                <div class="right-text">2+2+1</div>
            </div>
        </div>

        <div class="title-content-box block">
            <div class="title">风控措施</div>
            <div class="content">优先/次级产品结构化分层：当期优先级的本金和预期收益均在次级之前分配，原始权益人自持次级资产支持证券。 </div>
            <div class="content">担保人承担担保义务：担保人应承担的差额补足义务、优先04-07级资产支持证券的回售和赎回价款的支付义务提供撤销的连带持证券的回售和赎回价款的支付义务提供撤销的连带责任责任保证担保。</div>
        </div>

        <div class="title-content-box block">
            <div class="title">产品详细</div>
            <div class="content"><span class="color-red">注意：</span>此处的内容可能会有图片，图片点击可全屏显示，长按可以保存图片到本地，参考微信公众号文章的图片效果。 </div>
            <div class="content">
                <img src="https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg">
            </div>
        </div>

        <div class="title-content-box block">
            <div class="title">联系方式</div>
            <div class="content">电话：0755-82786009 </div>
            <div class="content">24小时热线：17704021318 </div>
            <div class="content">服务邮箱：service@djs18.com</div>
        </div>
        <div class="block"/>

        <bottom-btn text="马上预约" @onclick="handleSubscribe"/>

    </div>
</template>

<style lang="less" scoped>

    @import '../../style/variable';

    .page{

        padding-bottom: 6rem;

        .block{
            border-top: .8rem solid @color-bg-gray;
        }

        .data-box{
            background-color: @app-color;
            padding-top: 2.6rem;
            padding-bottom: 2rem;
            text-align: center;
            color: @color-white;

            .text{
                font-size: 1.4rem;
                line-height: 2rem;

            }
            .number{
                font-size: 4rem;
                line-height: 5.6rem;
                margin-top: .9rem;
                margin-bottom: 4.3rem;
            }
            .detail-box{
                display: flex;
                .item{
                    flex: 1;
                }
                .key{
                    font-size: 1.4rem;
                    line-height: 2rem;
                }
                .value{
                    font-size: 1.8rem;
                    line-height: 2.5rem;
                    margin-top: .7rem;
                }
            }
        }


        .main-data{
            padding: 1.5rem;
            border-bottom: 1px solid @color-line-gray;
            .data-item-box{
                font-size: 1.5rem;
                line-height: 2.1rem;
                display: flex;
                &:not(:first-child){
                    margin-top: .9rem;
                }
                .left-text{
                    color: @color-text-gray;
                }
                .right-text{
                    flex: 1;
                    margin-left: 1.5rem;
                    text-align: right;
                    word-break: break-all;
                }
            }
        }

        .title-content-box{
            padding: 1.5rem 1.5rem 1rem;
            .title{
                font-size: 1.6rem;
                line-height: 2.7rem;
                font-weight: bold;
                margin-bottom: .7rem;
            }
            .content{
                font-size: 1.5rem;
                line-height: 2.1rem;
                text-align: justify;

                img{
                    display: block;
                    padding: 1.5rem 0;
                    box-sizing: border-box;
                    width: 100%;
                    &:last-child{
                        padding-bottom: 0;
                    }
                }
            }
        }
    }

</style>

<script>
    export default {
        data (){
            return {}
        },
        methods: {
            handleSubscribe(){
                this.$router.push('/same/subscribe');
            }
        },
        created(){
            this.$store.commit('hideNav', true);
        }
    }
</script>